{% extends "repo/repo.html" %}

{% block bubble_inner_class_name %} stats{% endblock %}

{% block subcontainer %}
    <div class="span6">
        <div id="day_stats_div" class="hide">
            <h4>最近 24 小时</h4>
            <canvas id="day_stats" class="repo_chart" width="700" height="250"></canvas>
        </div>
        <div id="week_stats_div" class="hide">
            <h4>最近 7 天</h4>
            <canvas id="week_stats" class="repo_chart" width="700" height="250"></canvas>
        </div>
        <div id="month_stats_div" class="hide">
            <h4>最近 30 天</h4>
            <canvas id="month_stats" class="repo_chart" width="700" height="250"></canvas>
        </div>
        <div id="year_stats_div" class="hide">
            <h4>最近 12 月</h4>
            <canvas id="year_stats" class="repo_chart" width="700" height="250"></canvas>
        </div>
    </div>

    {% if per_user_commits %}
    <div class="span6">
        {% for pre_user_commit in per_user_commits %}
        <div>
            <h4>{{pre_user_commit.tip}}</h4>
            <code class="clearfix">
                <dl class="chart-bar-css">
                {% for commit in pre_user_commit.commits %}
                    <dt><a href="/{{commit.name}}/">{{commit.name}}</a></dt>
                    <dd><span class="data-one" style="width: {{commit.ratio}}%">{{commit.count}}({{commit.ratio}}%)</span></dd>
                {% endfor %}
                </dl>
            </code>
        </div>
        {% endfor %}
    </div>
    {% endif %}

    <div class="span6">
        <div>
            <h4>
                空间使用
                <span class="used">{{quotes.used_quote}}</span>
                <span class="divider"> / </span>
                <span class="capacity">{{quotes.total_quote}}</span>
            </h4>
        </div>
        <div class="progress progress-danger">
            <span class="bar" width=400 style="width: {{quotes.ratio}}%;"></span>
        </div>
    </div>

{% endblock %}

{% block subjs %}
<script>
$(function(){
    var last12hours = {{last12hours}};
    var last7days = {{last7days}};
    var last30days = {{last30days}};
    var last12months = {{last12months}};

    var last12hoursAsCat = [];
    var last7daysAsCat = [];
    var last30daysAsCat = [];
    var last12monthsAsCat = [];
    for(x in last12hours) {
        last12hoursAsCat.push(new Date(last12hours[x]*1000).getHours() + 'h');
    }
    last12hoursAsCat.reverse()
    for(x in last7days) {
        var d = new Date(last7days[x]*1000) 
        last7daysAsCat.push(d.getMonth()+1+'/'+d.getDate());
    }
    last7daysAsCat.reverse()
    for(x in last30days) {
        last30daysAsCat.push(new Date(last30days[x]*1000).getDate());
    }
    last30daysAsCat.reverse()
    for(x in last12months) {
        last12monthsAsCat.push((new Date(last12months[x]*1000).getMonth()+1) + 'm');
    }
    last12monthsAsCat.reverse()
    
    var last12hours_commit = {{last12hours_commit}};
    var last7days_commit = {{last7days_commit}};
    var last30days_commit = {{last30days_commit}};
    var last12months_commit = {{last12months_commit}};
    var last12hoursAsData = [];
    var last7daysAsData = [];
    var last30daysAsData = [];
    var last12monthsAsData = [];
    for(x in last12hours) {
        if(last12hours[x] in last12hours_commit) {
            last12hoursAsData.push(last12hours_commit[last12hours[x]]);
            continue;
        }
        last12hoursAsData.push(0);
    }
    last12hoursAsData.reverse();
    for(x in last7days) {
        if(last7days[x] in last30days_commit) {
            last7daysAsData.push(last30days_commit[last7days[x]]);
            continue;
        }
        last7daysAsData.push(0);
    }
    last7daysAsData.reverse();
    for(x in last30days) {
        if(last30days[x] in last30days_commit) {
            last30daysAsData.push(last30days_commit[last30days[x]]);
            continue;
        }
        last30daysAsData.push(0);
    }
    last30daysAsData.reverse();
    for(x in last12months) {
        if(last12months[x] in last12months_commit) {
            last12monthsAsData.push(last12months_commit[last12months[x]]);
            continue;
        }
        last12monthsAsData.push(0);
    }
    last12monthsAsData.reverse();

    function get_max(chart_data) {
        var max = 0;
        for(x in chart_data) {
            if(chart_data[x] > max) {
                max = chart_data[x];
            }
        }
        return max;
    }
    function get_steps(max) {
        var steps = 3;
        if(max > steps) {
            steps = 10;
        }
        return steps;
    }
    function render_commit_chart(selector, chart_labels, chart_data) {
        var max = get_max(chart_data);
        var steps = get_steps(max);
        var lineChartData = {
            labels : chart_labels,
            datasets : [
                {
                    fillColor : "rgba(151,187,205,0.5)",
                    strokeColor : "rgba(151,187,205,0.5)",
                    pointColor : "rgba(151,187,205,0.5)",
                    pointStrokeColor : "#fff",
                    data : chart_data
                }
            ]
        };
        var ctx = document.getElementById(selector).getContext('2d');
        new Chart(ctx).Line(lineChartData, {scaleShowLabels : true, scaleOverride: true, scaleSteps: steps, scaleStepWidth: Math.ceil(max / steps), scaleStartValue: 0, scaleFontColor : '#767C8D'});
    }
    if(Object.keys(last12hours_commit).length > 0) {
        $('#day_stats_div').show();
        render_commit_chart('day_stats', last12hoursAsCat, last12hoursAsData);
    }
    if(Object.keys(last7days_commit).length > 0) {
        $('#week_stats_div').show();
        render_commit_chart('week_stats', last7daysAsCat, last7daysAsData);
    }
    if(Object.keys(last30days_commit).length > 0) {
        $('#month_stats_div').show();
        render_commit_chart('month_stats', last30daysAsCat, last30daysAsData);
    }
    if(Object.keys(last12months_commit).length > 0) {
        $('#year_stats_div').show();
        render_commit_chart('year_stats', last12monthsAsCat, last12monthsAsData);
    }

});
</script>
{% endblock %}
